<!--
 * @Author: kiwi
 * @Date: 2025-05-12 12:57:19
 * @LastEditTime: 2025-06-03 11:56:00
 * @LastEditors: kiwi
 * @FilePath: \kouhan-h5\src\views\page\home\index.vue
 * @Description: 门户路由导航页
-->
<template>
  <div class="product_home" @scroll="onScroll">
    <div class="page_header">
      <img src="~@/assets/images/page/top_tip.png" alt="">
    </div>
    <div class="product_main">
      <div class="page_contain">
        <!-- :class="{'fixed':showFixed}" -->
        <div class="router_contain">
          <img src="~@/assets/images/page/logo.png" alt="" class="logo">
          <img src="~@/assets/images/page/more.png" alt="" class="logo_more" @click="openRorter">
        </div>
        <router-view />
      </div>
      <div class="page_footer">
        <div class="logo_info_other">
          <img src="~@/assets/images/page/logo.png" alt="" class="logo">
          <div class="footer-desc">
            ©2025 All Rights Reserved Zip It, LLC. Sold by Swisher, Fulfilled by Rogue Holdings, LLC.
            Do Not Sell My Personal Information - CA Residents Only. CA Supply chains.
          </div>
        </div>
        
        <div class="ooter-contain">
          <div class="footer-links">
            <div class="links_title">MENU</div>
            <div class="links_main">PRODUCTS</div>
          </div>
          <div class="footer-links">
            <div class="links_title">LEGAL</div>
            <div class="links_main" @click="handleJumpPage('/privacyPolicy')">PRIVACY POLICY</div>
            <div class="links_main" @click="handleJumpPage('/termsOfService')">TERM & CONDITIONS</div>
          </div>
          <div class="footer-links">
            <div class="footer-other">
              <span>FELLOW</span>
              <img src="~@/assets/images/page/footer_tip.png" alt="" class="footer_tip">
            </div>
          </div>
        </div>
        <div class="footer-warning">UNDERAGE SALE PROHIBITED</div>
      </div>
    </div>
    <!-- 路由导航 -->
    <transition name="slide-router">
      <div class="router_contain_position" v-if="showRouter">
        <img src="~@/assets/images/page/top_tip.png" alt="" class="logo">
        <div class="router_box">
          <div class="router_contain_tip">
            <img src="~@/assets/images/page/logo.png" alt="" class="logo">
            <img src="~@/assets/images/page/more_close.png" alt="" class="logo_more" @click="openRorter">
          </div>
          <div class="router_list">
            <div class="router_li" v-for="item in menuList" :key="item.inx" @click="jumpPage(item)">
              <div :class="['title_text',{ 'active_text': active == item.inx }]">{{item.text}}</div>
              <img src="~@/assets/images/page/route_tip.png" alt="" class="tip" v-show="active == item.inx">
            </div>
          </div>
        </div>
      </div>
    </transition>
    <el-dialog
      title=""
      :visible.sync="open"
      class="age-dialog"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="age-dialog-box">
        <div class="age-dialog-content">
          <div class="age-dialog-icon">
            <span>!</span>
          </div>
          <div class="age-dialog-title">ARE YOU<br>OVER 18 YEARS OLD?</div>
          <div class="age-dialog-desc">
            The products on this site contain tobacco and/or nicotine. To visit our shop, please verify that you are at least 18 years of age (or the legal age in your jurisdiction if it has a minimum requirement higher than 18).
          </div>
        </div>
        <div class="age-dialog-footer">
          <el-button type="primary" @click="open = false" class="age-dialog-btn">I AM 18+ AND OF LEGAL AGE</el-button>
        </div>
      </div>
    </el-dialog>
  </div>

</template>
<script>
export default {
  data(){
    return{
      active:1,
      menuList:[
        {
          inx:'1',
          text:'SHOW NOW',
          url:'/index#showNow',
        },
        {
          inx:'2',
          text:'PRODUCTS',
          url:'/index#products',
        },
        {
          inx:'3',
          text:'ABOUT',
          url:'/index#about',
        },
        {
          inx:'4',
          text:'CONTACT',
          url:'/index#contact',
        },
      ],
      open: false,
      currentSection: '',
      showRouter:false
    }
  },
  computed:{
    showFixed() {
      return this.active > 1 ? true : false 
    },
  },
  created(){
    // this.open = true;
    this.checkRoute();
  },
  beforeDestroy() {
    this.removeScrollListener();
  },
  watch: {
    $route: {
      handler() {
        this.scrollToTop();
        this.checkRoute();
      },
      immediate: true
    }
  },
  methods:{
    scrollToTop() {
      const mainContainer = document.querySelector('.product_home')
      if (mainContainer) {
        mainContainer.scrollTop = 0
      }
    },
    checkRoute() {
      if (this.$route.path === '/index') {
        const hash = this.$route.hash;
        if (hash) {
          this.currentSection = hash.substring(1);
          this.$nextTick(() => {
            this.scrollToSection(this.currentSection);
            history.replaceState(null, null, this.$route.path);
          });
        }
      }
    },
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        const mainContainer = document.querySelector('.product_home');
        if (mainContainer) {
          const containerRect = mainContainer.getBoundingClientRect();
          const elementRect = element.getBoundingClientRect();
          const scrollTop = elementRect.top - containerRect.top + mainContainer.scrollTop;
          
          mainContainer.scrollTo({
            top: scrollTop,
            behavior: 'smooth'
          });
        }
      }
    },
    jumpPage(data){
      this.active = data.inx
      if(this.$route.path === '/index' || (this.active == 1 && this.$route.path != '/index')){
        this.$router.push(data.url);
      }
      this.openRorter()
    },
    handleJumpPage(url){  
      this.active = 1;
      this.$router.push(url);
    },
    onScroll(){
      if (this.$route.path === '/index') {
        this.addScrollListener()
      }
    },
    addScrollListener() {
      const mainContainer = document.querySelector('.product_home');
      if (mainContainer) {
        mainContainer.addEventListener('scroll', this.handleScroll);
      }
    },
    removeScrollListener() {
      const mainContainer = document.querySelector('.product_home');
      if (mainContainer) {
        mainContainer.removeEventListener('scroll', this.handleScroll);
      }
    },
    handleScroll() {
      const mainContainer = document.querySelector('.product_home');
      if (!mainContainer) return;

      const sections = ['showNow', 'products', 'about', 'contact'];
      const containerRect = mainContainer.getBoundingClientRect();
      
      for (let i = sections.length - 1; i >= 0; i--) {
        const section = document.getElementById(sections[i]);
        if (section) {
          const sectionRect = section.getBoundingClientRect();
          const sectionTop = sectionRect.top - containerRect.top;
          
          // 当section的顶部进入可视区域时，更新active状态
          if (sectionTop <= 100) {
            this.active = String(i + 1);
            break;
          }
        }
      }
    },
    openRorter(){
      this.showRouter = !this.showRouter
    }
  }
}
</script>
<style lang="scss" scoped>
.product_home{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  .page_header{
    width: 100%;
    height: 129px;
    img{
      width: 100%;
      height: 129px;
    }
  }
  .product_main{
    width: 100%;
  }
  .page_contain{
    min-height: 400px; 
    position: relative;
    .fixed{
      position: fixed!important;
    }
    .router_contain{
      width: 100%;
      padding:49px 29px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: transparent;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10000;
      .logo{
        width: 88px;
        height: 43px;
        margin-right: 57px;
      }
      .logo_more{
        width: 18px;
        height: 13px;
        margin-left: 10px;
      }
    }
  }
  .page_footer{
    width: 100%;
    height: 274pxpx;
    background: #FFE46F;
    padding: 37px 48px 30px;
    box-sizing: border-box;
    .logo_info_other{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 33px;
      .logo{
        width: 88px;
        height: 43px;
        margin-right: 46px;
      }
      .footer-desc {
        font-size: 11px;
        color: #000000;
        line-height: 10px;
      }
    }
    
    .ooter-contain{
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      
      .footer-links{
        .links_title{
          color: #000000;
          font-weight: bold;
          font-size: 14px;
        }
        .links_main{
          font-size: 11px;
          margin-top: 7px;
          cursor: pointer;
          color: #000000;
        }
        .footer-other{
          display: flex;
          align-items: center;
          margin-top: -5px;
          span{
            color: #000000;
            font-weight: bold;
            font-size: 14px;
            margin-right: 7px;
          }
          .footer_tip{
            width: 27px;
            height: 27px;
          }
        }
      }
    }
    
    .footer-warning {
      font-size: 14px;
      font-weight: bold;
      color: #000000;
      letter-spacing: 0.5px;
      border-top: 1px solid #707070;
      padding-top: 19px;
      width: 100%;
      text-align: center;
    }
  }
}
::v-deep .el-dialog__wrapper {
  background-color: RGBA(186, 186, 187, 0.7)!important; /* 设置背景颜色和透明度 */
  z-index: 10000000!important;
}
::v-deep.age-dialog {
  .el-dialog {
    width: 274px!important;
    border-radius: 28px !important;
    margin-top: 30vh !important;
    background: transparent;
    border: 0px;
  }

  .el-dialog__header {
    display: none !important;
  }
  .el-dialog__body {
    padding: 0 !important;
  }
}
.age-dialog-box{
  width: 274px;
  position: relative;
  border-radius: 28px !important;
}
.age-dialog-content {
  background-color: rgba(255,255,255,0.5);
  padding: 15px 19px 15px 19px;
  text-align: center;
  border-radius: 28px 28px 0 0 !important;
  margin-bottom: 3px;
}
.age-dialog-icon {
  width: 64px;
  height: 64px;
  background-color: rgba(255,255,255,0.5);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -56px auto 16px auto;
  border: 6px solid #fff;
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translate(-50%,0);
  z-index: 20;
  span {
    color: #ff2d2d;
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
    position: relative;
    z-index: 10;
  }

  &::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 85px;
    height: 85px;
    background: RGBA(223, 223, 223, 0.3);
    z-index: 1;
    border-radius: 50%;
  }
}
.age-dialog-title {
  font-size: 17px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 5px;
  color: #222;
  line-height: 1.2;
}
.age-dialog-desc {
  font-size: 10px;
  color: #222;
  line-height: 1.5;
}
.age-dialog-footer {
  width: 100%;
  background: #888;
  border-radius: 0 0 28px 28px;
  padding: 10px 0;
  margin: 0 auto;
  &:hover{
    background: #FFE46F;
  }
}
.age-dialog-btn {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  background: #fff;
  color: #fff;
  background: none;
  border: none;
  box-shadow: none;
  background: transparent;
}
.router_contain_position{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 10000;
  background: #ffffff;
  .logo{
    width: 100%;
    height: 129px;
  }
  .router_box{
    width: 100%;
    height: calc(100% - 129px);
    padding: 49px 29px;
    box-sizing: border-box;
  }
  .router_contain_tip{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 2px solid #000000;
    .logo{
      width: 88px;
      height: 43px;
      margin-right: 57px;
    }
    .logo_more{
      width: 21px;
      height: 21px;
    }
  }
  .router_list{
    width: 100%;
    .router_li{
      width: 100%;
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-right: 52px;
      margin-top: 31px;
      .title_text{
        display: inline-block;
        color: #B5B5B6;
        font-size: 22px;
        font-weight: bold;
        font-style: italic;
        margin-right: 9px;
        &.active_text{
          color:#000000;
        }
      }
      .title_img{
        margin-right: 9px;
      }
    }
  }
}
.slide-router-enter-active, .slide-router-leave-active {
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-router-enter {
  transform: translateX(100%);
}
.slide-router-enter-to {
  transform: translateX(0);
}
.slide-router-leave {
  transform: translateX(0);
}
.slide-router-leave-to {
  transform: translateX(100%);
}
</style>
